//给jq对象实例方法添加方法
$.fn.extend({
    myFullPage : function (config) {
        //初始化变量
        var colorsArray = config.colorsArray;
        var $W = $(this);//wrapper dom 对象
        var $Section = $W.find('.section');
        var clientWidth = $(window).outerWidth();
        var clientHeight = $(window).outerHeight();
        //索引
        var curIndex = 0;
        var lock = true;//防止频繁点击按钮后导致计算错误
        var commonStyle = {
            width : '100%',
            height : '100%',

        }

        //初始化样式
        $('html')
            .add('body')
                .css({
                    position : 'relative',
                    overflow : 'hidden',
                    margin : 0    
                }).add($W)
                        .add($Section)
                            .css(commonStyle);

        $W.css({
            position : 'absolute',
            left : 0,
            top : 0,
        }).find('.section')
            .each(function (index,ele) {
                $(ele).css({
                    backgroundColor : colorsArray[index],
                    position : 'relative',
                    left : 0,
                    top : 0,
        
                }).find('.slider')
                    .css({float:'left',height:clientHeight,width:clientWidth})
                        .wrapAll('<div  class = "sliderWrapper"></div>');
                        console.log(ele);
                            $(ele).find('.sliderWrapper')
                                .css({width : function () {
                                    return $(this).find('.slider').length * clientWidth;
                                },
                                height : clientHeight,
                                position: 'absolute',
                                left: 0,
                                top: 0})
            })

            //js控制移动
            //给section active
            //给每一个section下面的slider innerActive
            //类名初始化
            $Section.eq(0).addClass('active').end().find('.sliderWrapper').each(function (index,ele) {
                $(ele).find('.silder').eq(0).addClass('innerActive')
            })

            //控制行动
            $(document).on('keydown',function (e) {
                //e.which
                //left 37 top 38 right 39 bottom 40
                if(lock) {
                    var direction = '';
                    if(e.which == 38 || e.which == 40) {
                        var newTop = $W.offset().top;
                        lock = false;
                        //垂直运动
                        if(e.which == 38 && curIndex != 0) {
                            //top
                            direction = 'top';
                            curIndex --;
                            newTop += clientHeight;

                        }else if (e.which == 40 && curIndex != $Section.length - 1) {
                            //bottom
                            direction = 'bottom';
                            curIndex ++;
                            newTop -= clientHeight;
                        }
                        $W.animate({
                            top : newTop
                        },350,'swing',function () {
                            lock = true;
                            if(direction == 'top') {
                                $Section.eq(curIndex + 1).removeClass('active');
                            }else {
                                $Section.eq(curIndex - 1).removeClass('active');
    
                            }
                            $Section.eq(curIndex).addClass('active');
                        })
        
                    }
    
    
                   
                    if(e.which = 37 || e.which == 39) {
                        //水平运动
                        
                    }
                }
            })
    }
})